<template>
  <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%;"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="序号" width="60" property="index"/>
    <el-table-column label="IP地址"  width="120px" property="ip"/>
    <el-table-column label="User-Agent"  width="800px" property="userAgent"/>
    <el-table-column label="登录时间"  width="200px" property="logindate"/>
  </el-table>
  <div style="margin-top: 10px; float: right">
    <div style="margin: 5px">共1条数据</div>
    <el-pagination background layout="prev, pager, next" :total="10" />
  </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {ElMessage, ElMessageBox, ElTable} from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'

interface User {
  index: number
  ip: string
  userAgent: string
  logindate: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const tableData: User[] = ref([
  {
    index: 1,
    ip: '172.16.17.32',
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36',
    logindate: '2021-07-20 10:10:10'
  }
])
</script>

<style scoped>

</style>